<template>
	<view>
		<view style="display: flex;flex-direction: column;">
			<image src="../../static/banner01.jpg" style="height: 280upx;"></image>
			<view class="main-bg-color-bai row a-center text-center flag" style="height: 88upx;">
				<view class="flex-1" @tap="activeTab(1)" :class="{active_red:active == 1}">综合<text class="iconfont">&#xe60e;</text></view>
				<view class="flex-1" @tap="activeTab(2)" :class="{active_red:active == 2}">销量<text class="iconfont">&#xe60e;</text></view>
				<view class="flex-1" @tap="activeTab(3)" :class="{active_red:active == 3}">价格
					<text style="position:relative;width:32upx;" class="iconfont">
						<text :class="{nactive_red:activePrice == 2}" style="position:absolute;float:left;width:32upx;height:32upx;line-height:48upx;">&#xe60f;</text>
						<text :class="{nactive_red:activePrice == 1}" style="position:absolute;float:left;width:32upx;height:32upx;line-height:32upx;margin-top:20upx;">&#xe60e;</text>
					</text>
				</view>
			</view>
		</view>
		<view class="main-bg-color-hui p-3 row j-sb pb-10">
			<block v-for="(item,index) in goods" :key="index">
			<view @tap="togoodinfo(item.id)" class="my-1 main-bg-color-bai" style="width: 332upx;height: 430upx;display: flex;flex-direction: column;border-radius: 10rpx 10rpx 0 0;overflow: hidden;position: relative;">
				<image :src="baseUrl+item.img" style="height: 244upx;"></image>
				<view class="p-2 main-bg-color-bai">
					<view  style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
						{{item.title}}
					</view>
					<view class="row j-sb font-md a-center main-text-color" style="padding: 0 20rpx;position: absolute;bottom: 20rpx;">
						<text><text class="font-sm font-a">￥</text>{{item.price}}</text>
						<!-- <image @tap.stop="addcar(index)" src="../../static/tabbar/car.png"  style="width: 38upx;height: 30upx;"></image> -->
					</view>
				</view>
			</view>
			
			</block>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				carts: [],
				page:1,
				baseUrl:request.common.baseUrl,
				active:1,
				activePrice:2,
				goods:[]
			}
		},
		onShow() {
			this.getMyCarts()
		},
		onLoad:function(){
			uni.request({
			    url: request.common.baseUrl+'/api/goods/productAll',
			    data: {
					flag_type:this.active,
					flag_price:this.activePrice,
					page:this.page
				},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						this.goods=res.data.data
					}else{
						uni.showToast({
						    title: '暂无数据',
							icon: 'none',
						    duration: 2000
						});
					}
			    }
			});
		},
		methods: {
			getMyCarts() {
				uni.request({
					url: request.common.baseUrl+'/api/cart/myCarts',
					data: {
						page: 1,
						token:uni.getStorageSync('keyToken')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code == 200){
							this.carts = res.data.data
						}else{
							this.carts = []
						}
						if(this.carts.length){
							uni.setTabBarBadge({
							  index: 2,
							  text: JSON.stringify(this.carts.length),
							})
						}else{
							uni.removeTabBarBadge({
								index: 2,
							})
						}
					}
				})
			},
			activeTab(v){
				this.active = v;
				this.page=1;
				if(this.activePrice==1){
					this.activePrice=2;
				}else if(this.activePrice==2){
					this.activePrice=1;
				}
				uni.request({
				    url: request.common.baseUrl+'/api/goods/productAll',
				    data: {
						flag_type:this.active,
						flag_price:this.activePrice,
						page:this.page
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							this.goods=res.data.data
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			},
			togoodinfo(pid){
				uni.navigateTo({
					url: '/pages/goodinfo/goodinfo?id='+pid
				});
			},
			addcar(index){
				let params='';
				for (var j = 0; j < this.goods[index].attrarrs.length; j++) {
					params=params+this.goods[index].attrarrs[j].attrval+';';
				}
				uni.request({
					url: request.common.baseUrl+'/api/cart/wcartIn',
					data: {
						token:uni.getStorageSync('keyToken'),
						product_id:this.goods[index].id,
						buy_num:1,
						params:params
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							uni.showToast({
							    title: '添加购物车成功',
								icon: 'none',
							    duration: 2000
							});
						}else{
							uni.showToast({
							    title: res.data.msg,
								icon: 'none',
							    duration: 2000
							});
						}
					}
				});
			}
		},
		onReachBottom:function(){
			this.page=this.page+1;
			uni.request({
			    url: request.common.baseUrl+'/api/goods/productAll',
			    data: {
					flag_type:this.active,
					flag_price:this.activePrice,
					page:this.page
				},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						for (var j = 0; j < res.data.data.length; j++) {
							this.goods.push(res.data.data[j])
						}
					}else{
						uni.showToast({
						    title: '暂无数据',
							icon: 'none',
						    duration: 2000
						});
					}
			    }
			});
		}
		
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
@font-face {
  font-family: 'iconfont';
  src: url('@/static/font/iconfont.eot');
  src: url('@/static/font/iconfont.eot?#iefix') format('embedded-opentype'),
	  url('@/static/font/iconfont.woff2') format('woff2'),
	  url('@/static/font/iconfont.woff') format('woff'),
	  url('@/static/font/iconfont.ttf') format('truetype'),
	  url('@/static/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 34upx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.active_red{
  color: #FD6801;
}
.nactive_red{
  color: #666666;
}
</style>
